<template>
  <div class="witness-body">
    <breadcrumb
      :bread-path-list="breadPathList"
      last-bread-title="查看见证资料"
      :show-back-btn-flag="true"
      @handleBack="handleBack"
    />
    <div class="box_one">
      <div class="biaoTi">
        当前任务：
        <el-tooltip
          class="item"
          effect="light"
          max-width="85%"
          :content="information.projectName + ' ─ ' + information.bidSectionName"
          placement="top"
        >
          <span>{{ information.projectName }} ─ {{ information.bidSectionName }}</span>
        </el-tooltip>
      </div>
    </div>
    <div class="box">
      <div class="box_tow">
        <div class="box_top">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="见证报告" name="0">
              <div class="witnessPdf">
                <WitnessReportPdf
                  :show.sync="pdfVisibleBaogao"
                  :pdf-params-baogao="pdfParamsBaogao"
                  pdf-box-height="636px"
                />

              </div>
            </el-tab-pane>
            <el-tab-pane label="见证书" name="1">
              <div class="witnessPdf">
                <WitnessPdf :show.sync="pdfVisible" :pdf-params="pdfParams" pdf-box-height="636px" />
              </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="交易附件" name="2">角色管理</el-tab-pane>
            <el-tab-pane label="音视频" name="3">定时任务补偿</el-tab-pane> -->
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import WitnessPdf from "../../components/WitnessPdf"; // 见证书预览pdf组件
  import WitnessReportPdf from "../../components/WitnessReportPdf.vue"; // 见证书预览pdf组件
  export default {
    // 引入组件
    components: { WitnessPdf, WitnessReportPdf },
    data() {
      return {
        breadPathList: [
          {
            path: "/WitnessTaskManagement/WitnessTaskView",
            title: "见证任务管理"
          }
        ],
        Status: "WITNESS_UN_REVIEWED",
        pdfVisible: false,
        activeName: "0",
        pdfVisibleBaogao: true,
        pdfParams: {
          belongId: "", // 附件归属主键id——必传参数
          attachTypeCode: "WITNESS_BOOK" // 附件编码——必传参数(查看见证书code为：WITNESS_BOOK)
        },
        pdfParamsBaogao: {
          belongId: "", // 附件归属主键id——必传参数
          attachTypeCode: "WITNESS_REPORT" // 附件编码——必传参数(查看见证报告code为：WITNESS_REPORT)
        },
        information: {
          bidSectionName: "",
          projectName: ""
        }
      };
    },
    created() {
      this.pdfParams.belongId = this.$route.query.witnessTaskId;
      this.information.bidSectionName = this.$route.query.bidSectionName;
      this.information.projectName = this.$route.query.projectName;
      this.pdfParamsBaogao.belongId = this.$route.query.witnessTaskId;
    },
    methods: {
      load() {
        this.count += 2;
      },
      // 返回方法
      handleBack() {
        this.$router.push({ path: "/WitnessTaskManagement/WitnessTaskView" });
      },
      handleClick(e) {
        if (e.index === "0") {
          this.pdfVisibleBaogao = true;
        } else {
          this.pdfVisibleBaogao = false;
        }
        if (e.index === "1") {
          this.pdfVisible = true;
        } else {
          this.pdfVisible = false;
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .layout-search {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0px 10px 10px 0;
    background-color: #eeeeee !important;
    // display: none;
  }
  .daishenhe-tag {
    display: inline-block;
    position: relative;
    top: -30px;
    left: 720px;
    margin-right: 10px;
    margin-right: 10px;
    i {
      font-size: 70px;
      color: $primary;
    }
  }
  .btn_top {
    color: #fff;
    border-radius: 4px;
    display: inline-block;
    padding: 0px 20px;
    background-color: #eee;
    border: 1px solid rgb(0, 140, 255);
  }
  .box_one {
    border-top: 1px solid #ededed;
    line-height: 0;
    padding: 10px 20px;
    // margin-bottom: 10px;
    background-color: #fff;
  }
  .box_top {
    width: 100%;
  }
  ::v-deep .el-tabs__header {
    padding-top: 10px !important;
    background: #fff !important;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    background: #fff !important;
  }
  ::v-deep .el-steps--simple .el-step .el-step__title {
    line-height: 20px !important;
    color: #1890ff !important;
  }
  ::v-deep .el-steps--simple .el-step.is-step-process .el-step__title {
    color: #fff !important;
  }
  ::v-deep .el-tabs--top .el-tabs__content {
    height: 710px !important;
  }
  ::v-deep .el-steps--simple .el-step {
    background: #e8f4ff !important;
    cursor: pointer !important;
  }
  ::v-deep .el-steps--simple .el-step.is-step-process {
    background: #1890ff !important;
  }
  ::v-deep .el-steps--simple .el-step.is-step-process:after {
    line-height: 20px !important;
    border: 10px solid transparent;
    border-left: 12px solid #1890ff !important;
    right: -22px !important;
  }
  ::v-deep .el-steps--simple .el-step {
    height: 20px !important;
  }
  ::v-deep .el-steps--simple .el-step:after {
    right: -22px !important;
    border: 10px solid transparent;
    border-left: 12px solid #e8f4ff !important;
  }
  ::v-deep .el-steps--simple .el-step:before {
    border: 10px solid transparent !important;
    border-left: 10px solid #fff !important;
  }
  ::v-deep .el-steps--simple:not(.is-average) {
    top: 4px !important;
  }
  ::v-deep .is-last {
    clear: both !important;
  }
  .biaoTi {
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .biaoTi span {
    font-size: 14px;
    font-weight: bold;
  }
  .box {
    padding: 10px;
    height: 100%;
  }
  .box_tow {
    width: 100%;
  }
  .footer {
    height: 50px;
    width: 100%;
    background: #fff;
  }
  .witnessPdf {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    .pdf-btns {
      z-index: 999;
      padding: 10px 10px;
    }
    .pdf-box {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-left: 25%;
      padding-right: 25%;
      padding-bottom: 0;
      background: #d6dae6;
      border-radius: 0px 0px 2px 2px;
      overflow: auto;
      .pdf_num_div {
        margin-bottom: 10px;
        position: relative;
        overflow: hidden;
        .pageNume {
          font-size: 12px;
          color: #666;
          position: absolute;
          bottom: 10px;
          left: calc(50% - 10px);
        }
      }
    }
  }
</style>
